<template>
    <div class="container clearfix">
        <transition name="fade">
            <div class="mobile-shadow" v-if="showLeftSider" @click="showLayer(false)"></div>
        </transition>
        <div class="left-block hide-in-mobile" v-show="showLeftSider">
            <Menu theme="light" active-name="1" @on-select="showIntro">
                <MenuGroup title="数据库">
                    <MenuItem name="1">
                    <Icon type="document-text"></Icon>
                    药典分类
                    </MenuItem>
                    <MenuItem name="2">
                    <Icon type="chatbubbles"></Icon>
                    批准信息
                    </MenuItem>
                </MenuGroup>
            </Menu>
        </div>
        <div class="right-block">
            <div class="state" v-show="state == 1">
                <h2 class="title">本数据库收载国内外药品标准及药典目录及全文。</h2>
                <div class="content">
                    <p>（1）国外药品标准包括美国药典、日本药典、欧洲药典、印度药典、韩国药典、WHO国际药典等，以通用名或专论名为关键字检索。</p>
                    <p>（2）国内药品标准包括：中国药典2015年版本数据库提供标准索引查询，部分提供全文下载。本库数据不定期增加收录，欢迎从事药物开发者使用！有愿意提供新的标准内容，或有任何意见或建议，请与276481348@qq.com联系！</p>
                    <p>注：药品标准全文为PDF格式，需安装Adobe Reader 阅读器，本数据由网络资源提供，仅供学习参考使用。<a style="color:#3396ff" target="_blank" href="https://gjypzc.taobao.com/">最新药典代查</a></p>
                </div>
            </div>
            <div class="state" v-show="state == 2">
                <h2 class="title">本数据库收载国内外药品上市批准信息。</h2>
                <div class="content">
                    <p>（1）国外药品上市批准信息包括美国DMF注册数据库、欧盟药品上市信息（EMA）、欧盟药品上市信息（HMA），日本药品上市信息、美国FDA橙皮书数据库，美国FDA药品数据库等，以通用名或专论名为关键字检索。</p>
                    <p>（2）国内药品上市批准信息包括：国产药品数据库和进口药品数据库</p>
                    <p>注：本库数据不定期增加收录，欢迎从事药物开发者使用！有愿意提供新的批准信息内容，或有任何意见或建议，请与276481348@qq.com联系！</p>
                </div>
            </div>
            <div class="form-block">
                <button class="search-btn" @click="search">搜索</button>
                <div class="search-group">
                    <div class="type">
                        <span class="selected" @click="showOptions = !showOptions">{{selected.name}}&nbsp;&nbsp;<Icon :type="showOptions?'arrow-up-b':'arrow-down-b'"></Icon></i></span>
                        <ul class="dropdown" v-show="showOptions">
                            <li :class="{'is-active':option.id == selected.id}" v-for="option in options" @click="selectOption(option)">{{option.name}}</li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <input type="text" v-model="keyword" class="form-control" v-focus="focusStatus" :placeholder="placeholder" />
                        <a v-show="keyword" @click="clearWord" class="clear"><Icon type="close-circled"></Icon></a>
                    </div>
                </div>
            </div>
            <Table :columns="codexTableColumns" v-if="state == '1' && table1.list.length != 0" :data="table1.list"></Table>
            <Table :columns="ratifyTableColumns" v-if="state == '2' && table2.list.length != 0" :data="table2.list"></Table>
            <Page class="pagination"
                :current="table1.page"
                :total="table1.total"
                :page-size="table1.size"
                @on-change="handleCodexPage"
                size="small"
                show-total
                v-show="table1.list.length != 0 && state == '1'">
            </Page>
            <Page class="pagination"
                :current="table2.page"
                :total="table2.total"
                :page-size="table2.size"
                @on-change="handleRatifyPage"
                show-total
                size="small"
                v-show="table2.list.length != 0 && state == '2'">
            </Page>
        </div>
        <a class="affix" @click="showLayer(true)" v-show="!showLeftSider">
            <Icon type="chevron-right"></Icon>
            <Icon type="chevron-right"></Icon>
            <Icon type="chevron-right"></Icon>
        </a>
    </div>
</template>
<script>
    import $ from 'jquery';
    import smartScroll from '../../utils/noscroll.js'
export default {
    data(){
        return{
            dataList:[],
            active_name:null,
            keyword:'',
            state:1,
            focusStatus:false,
            options:[{
                name:'全部',
                id:''
            }],
            selected:{
                // name:'全部',
                // id:''
            },
            show:{},
            showOptions:false,
            codexTableColumns:[{
                title:'名称',
                key:'name',
                align:'left'
            },{
                title:'标准来源',
                key:'sources',
                align:'center'
            },{
                title:'操作',
                align:'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'success',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    window.open(params.row.uploads[0].url);
                                }
                            }
                        }, '查看'),
                    ]);
                }
            }],
            ratifyTableColumns:[{
                title:'名称',
                key:'name',
                align:'center',
            },{
                title:'批准号',
                key:'ratify_number',
                align:'center'
            },{
                title:'国家/组织',
                align:'center',
                render: (h, params) => {
                    return h('div', params.row.category.data.name)
                }
            },{
                title:'公司名称',
                key:'company',
                align:'center'
            },{
                title:'批准日期',
                key:'inTimes',
                align:'center'
            },{
                title:'状态',
                align:'center',
                render: (h, params) => {
                    return h('div', params.row.statusText)
                }
            }],
            table1:{
                list:[],
                page:1,
                size:15,
                total:0
            },
            table2:{
                list:[],
                page:1,
                size:15,
                total:0
            },
            placeholder:'请输入药品名称',
            showLeftSider:false,
        }
    },
    directives: {
        focus: {
            update:(el,{value})=>{
                if(value){
                    el.focus();
                }
            }
        }
    },
    watch:{
        'selected.type':(newValue,oldValue)=>{

        }
    },
    mounted(){
        this.showIntro('1');
        this.getCategory();
        if(document.body.clientWidth > 1024){
            this.showLeftSider = true;
        }
    },
    methods:{
        showIntro(which){
            this.state = which;
            if(which == '1'){
                this.getCategory();
                this.placeholder = '请输入药品名称';
            }else{
                this.getOrganic();
                this.placeholder = '请输入原料药名或商品名或批准号';
            }
            this.focusStatus = true;
            this.showOptions = false;
        },
        clearWord(){
            this.keyword = '';
        },
        selectOption(option){
            this.selected = option;
            this.showOptions = false;
        },
        search(){
            if(this.state == '1'){
                this.getCodex();
            }else if(this.state == '2'){
                this.getRatify();
            }
            this.show = Object.assign({},this.selected);
        },
        getCategory(){
            this.$http.get('/cc/list',{
                params:{
                    fe:1
                }
            })
            .then(res=>{
                const data = res.data;
                this.options = data.data;
                this.options.unshift({name:'全部',id:''});
                this.selected = this.options[0]
            })
        },
        getOrganic(){
            this.options = [{name:'全部',id:''}];
            this.selected = this.options[0];
        },
        getCodex(){
            this.$http.get('/codex/list/',{
                params:{
                    include:'category',
                    name:this.keyword,
                    page:this.table1.page,
                    fe:1,
                    category_id:this.selected.id
                }
            }).then(res=>{
                const data = res.data;
                this.table1.list = data.data;
                this.table1.page = data.meta.pagination.current_page;
                this.table1.total = data.meta.pagination.total;
            }).catch(err => {

            })
        },
        getRatify(){
            this.$http.get('/ratify/list/',{
                params:{
                    include:'category',
                    name:this.keyword,
                    page:this.table2.page,
                    fe:1,
                    category_id:this.selected.id
                }
            }).then(res=> {
                const data = res.data;
                this.table2.list = data.data;
                this.table2.page = data.meta.pagination.current_page;
                this.table2.total = data.meta.pagination.total;
            }).catch(err => {

            })
        },
        handleCodexPage(val){
            this.table1.page = val;
            this.search();
        },
        handleRatifyPage(val){
            this.table2.page = val;
            this.search();
        },
        showLayer(status) {
            this.showLeftSider = status;
            if (status) {
                smartScroll($('.left-block'), '.ivu-menu');
                $('html').addClass('noscroll');
            } else {
                $('html').removeClass('noscroll');
            }
        }
    }
}
</script>
<style scoped>
.container{ max-width:1200px; margin:40px auto;}
.left-block{ border:1px solid #dddee1; float: left; width:220px; min-height:300px;}
.left-block .ivu-menu{ width:100% !important;}
.left-block .ivu-menu:after{ display:none; }
.right-block{ margin-left:250px; margin-top:40px; margin-bottom:40px;}
.right-block .title{ font-size:14px; font-weight:bold; line-height:28px;}
.right-block .date{ text-align:center;}
.right-block .content{ line-height:24px; font-size:12px;}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){ color:#15ccac; border-color:#15ccac;}
.state{ color:#999;}
.form-block{ width:70%; margin:40px auto; height:40px;}
.search-btn{ float: right; width:120px; height:100%; border-radius:5px; transition:background 0.2s ease-out; cursor: pointer; background:#15bb9e; color:#fff;}
.search-btn.unactived{ color:#999; background:#f7f7f7; pointer-events:none;}
.search-btn.actived{background:#15bb9e; color:#fff;}
.search-btn:hover{ background:#15ccac; }
.search-group{ position: relative;border:1px solid #e6e6e6; height:100%; border-radius: 5px; margin-right:140px;}
.type{ width:120px; height:100%; padding:4px; float: left;}
.type .selected{ background:#f3f3f3; width:100%; height:100%; display:block; line-height:30px; text-align:center; border-radius:5px; cursor: pointer;}
.type ul{ position: absolute; left:0; z-index: 100;}
.form-group{ margin-left:130px; height:100%; margin-right:30px; position: relative;}
.form-control{ width:100%; border:none; outline:none; height:100%;}
.clear{ position: absolute; right:-20px; top:50%; margin-top:-7px; color:#ccc; transition:color 0.2s ease-out; cursor: pointer;}
.clear:hover{ color:#666;}
.dropdown{ width:112px; margin-left:4px; margin-top:4px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.2);padding:5px 0;}
.dropdown li{ text-align:center; font-size:14px; line-height:28px; cursor:pointer; transition:all 0.1s linear;}
.dropdown li:hover,.dropdown li.is-active{ background:#15ccac; color:#fff;}
@media (max-width:1024px){
    .hide-in-mobile{ 
        position: fixed;
        top:0;
        left:0;
        background: #fff;
        height:100%;
        z-index: 1000;
    }
    .mobile-shadow{
        position: fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        z-index: 100;
        background: rgba(0,0,0,0.2);
    }
    .container{ margin-top:20px; }
    .right-block{ margin-left:0; margin-top:0; padding:15px;}
}
@media (max-width:768px){
    .form-block{ width:90%;}
    .type{ width:80px;}
    .type .selected{ font-size:12px;}
    .search-btn{ width:80px;}
    .search-group{ margin-right:90px; }
    .dropdown{ width:72px;}
    .dropdown li{ font-size:12px;}
    .form-group{ margin-left:80px; }
    .layer{ position: fixed;top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.4); z-index: 1;}
    .affix{ display:block; position: fixed; left:0; top:50%; margin-top:-50px; padding:20px 5px; background:#fff; border:1px solid #666; border-left:none; border-radius:0 3px 3px 0;}
    .affix i{ margin-right:-3px;}
}
@media (max-width:360px){
    /* .form-block{ width:80%; } */
}
</style>